<template>
  <div class="jsm_body">
    <Header>
    </Header>
    <div class="header-img">
      <img src="../../assets/img/header1.png" alt="">
    </div>
    <Frame>
      <h style="display: none">{{ mid }}</h>
      <h1 slot="contitle" class="title">{{ list.memberResponsibility }}介绍</h1>
      <div slot="text">
        <el-page-header class="goBack" @back="goBack" content="详情页面">
        </el-page-header>
        <div class="dts-body">
          <div class="img">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="list.memberPhoto" class="image">
            </el-card>
          </div>
          <div class="writing">
            <h3>{{ list.memberName }}</h3>
<!--            <hr>-->
            <p class="memberIntroductory">{{ list.memberIntroductory }}</p>
          </div>
        </div>

      </div>
    </Frame>
    <Bottom></Bottom>
  </div>
</template>

<script>
const Frame = () => import('../Frame')
const Header = () => import('../Header')
const Bottom = () => import('../Bottom')
export default {
  name: "Details",
  data() {
    return {
      memberId: '',
      list: []
    }
  },
  components: {
    Header,
    Bottom,
    Frame
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  },
  computed: {
    mid() {
      this.memberId = this.$route.params.mid
      return this.$route.params.mid
    }
  },
  created() {
    this.$nextTick(function () {
      this.$axios({
        url: '/officialwebsite/memberFrontDesk/selectMemberFrontDesk',
        method: 'get',
        params: {
          id: this.memberId
        }

      }).then(res => {
        console.log(123456920)
        console.log(res)
        this.list = res.obj
      })
    })
  }

}
</script>

<style lang="less" scoped>
.jsm_body {
  background-color: #eeeeee;
}

.header-img {
  margin-top: 45px;

  img {
    width: 100%;
    height: 25em;
  }
}

.father-head {
  height: 85px;
  background-color: #eeeeee;
}

.dts-body {
  display: flex;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: space-around;

  .img {
    max-width: 400px;
  }

  .writing {
    //font-family: Roboto;
    margin: auto 0;
    max-width: 500px;

    p {
      margin-top: 40px;
      text-indent: 2em;
      font-size: 17px;
    }
  }
}

.image {
  width: 100%;
  display: block;
  height: 100%;
}

@media screen and (max-width: 850px) {
  .header-img {
    margin-top: 0px;

    img {
      height: 15em;
    }
  }
  .goBack {
    display: none;
  }
  .dts-body {
    .writing {
     .memberIntroductory {
        font-size: 14px !important;
       margin-top: 10px;
      }
    }
  }


}
</style>
